<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/temp.css">
    <link rel="shortcut icon" href="images/title-logo.jpg">
</head>

<body>
    <div class="header">
        <div class="one">
            <p>新英雄</p>
            <span>人鱼之歌</span>
            <span>朵莉亚</span>
        </div>
        <div class="return"><a href="index.html">首页</a></div>
        <div class="headernei">
            <div class="two">
                <span>英雄介绍</span>
            </div>
            <div class="three">
                <span>玩法思路</span>
            </div>
            <div class="four">
                <span>设计思路</span>
            </div>
        </div>
    </div>
    </div>
    <div class="main">
        <div class="bimg">
        </div>
        <div class="yxjs">
            <div class="left">
                <span class="huang" id="q1"><b>英雄故事</b></span>
                <div class="xian"></div>
                <span
                    class="white">来自大海深处的人鱼少女朵朵，正伪装成人类在海都“寻宝”。作为人鱼族最有潜力的歌者，她会唱的人鱼祝歌非常多。热忱开朗的她，面对危险也毫不退缩，总是竭尽全力去帮助他人。人鱼之歌，重奏海洋乐章。原来最完美的天籁，来源于爱与热忱。</span>
                <div class="miaoshu">
                    <span>人鱼之歌</span>
                    <span>朵莉亚</span>
                </div>
            </div>
        </div>
        <div class="wfjs">
            <span class="huang" id="q2">玩法思路</span>
            <div class="lxian"></div>
            <div class="left1">
                <span style="color:  rgb(235, 141, 19); font-size: larger;"> 玩法设计</span><br>
                <span class="white">
                    随时随地都想帮助别人的朵朵，拥有一些特殊的本领。<br>
                    她在水域中时会恢复人鱼形态，吟唱出的歌声能探索未知的前方，<br>汹涌的浪花还可以击退敌人。<br>
                    遇到危险时，朵朵可以召唤出一片水域，保护自身的同时为同伴恢复状态。<br>
                    朵朵的天籁之声可以为队友刷新技能，能够帮助身边的朋友，她比谁都开心。<br>
                    欢歌逐浪，天籁为伴。无论身处何种境地，朵朵始终拥有无限的乐观与勇气<br>
                </span>
            </div>
            <div class="right1">

            </div>
        </div>
        <div class="sjsl">
            <br><br><br><br><br><br><br><br>
            <span class="huang" id="q3"> 设计思路</span>
            <div class="llxian"></div>
            <br>
            <div class="text">
                <span class="xssj">叙事设计</span><br>
                <span
                    class="more">不谙世事的朵朵来到海都后遇到了许多新奇玩意儿，她发现这里的人类会做好多好吃的，他们还喜欢用金闪闪的东西扔进大水坑里……但也有不少令朵朵头疼的事情，比如海都的路实在是太多了，根本不知道走哪条，还有喵喵叫的四脚怪兽追她，实在是太可怕了！
                    　　人类世界还会有雨从天上落下来，这样的日子总是让朵朵无所适从，因为只要一碰到水，她的腿就会变回鱼尾。
                    　　但，不管如何，属于她的冒险还是开始了！走在热闹繁华的海都街头，与一位冷冰冰的少年擦肩而过，朵朵的心里不禁犯起了嘀咕——怎么这张冰块脸，总觉得有些面熟？</span>
                <br><br><br>
                <span class="xssj">美学设计</span><br>
                <span class="more">歌声美妙的人鱼朵朵，以海浪为发，似在阳光下的一湾粼粼碧波。她的耳鳍拥有梦幻般的色彩，灵动十足。鱼尾轻盈飘逸，五光十色。
                    　　化作人类少女的朵朵，顶着一头萌趣呆毛，与她“爱帮忙但常常帮倒忙”的脱线性格呼应。充满海洋元素的连衣裙，裙摆似鱼尾。腰间还佩戴着一个装着海水的透明圆球小包，里面居住着某种神奇生物。
                </span>
                <div class="last"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/temp.js"></script>
    <!-- <script>
        let temp = 0
        let header = document.querySelectorAll('.headernei span')
        for (let i = 0; i < header.length; i++) {
            header[i].addEventListener('click', function () {
                header[temp].classList.remove('yellow')
                temp = i
                header[i].classList.add('yellow')
                document.querySelector(`#q${i + 1}`).scrollIntoView({ behavior: "smooth" })
            })
        }
        for (let i = 0; i < header.length; i++) {
            header[i].addEventListener('mouseover', function () {
                header[i].classList.add('yel')

            })
            header[i].addEventListener('mouseleave', function () {
                header[i].classList.remove('yel')
            })
        }
    </script> -->
</body>

</html>